German version German version
DHTML: Tooltip JavaScriptHome DHTML-Drag&Drop-Library VectorGraphics-Library Function-Grapher


 
 
 
 
 
 
 
 
 

 

 
 

JavaScript, DHTML
Tooltips
JavaScript Cross Browser Library.
Developed by Walter Zorn
  		 
 
 
DHTML: Tooltip with JavaScript  
Features
 
Cross Browser
 
Documentation
 
Extensions
 
Download
 
A cross-browser Tooltip JavaScript Library to create tooltips, information popup boxes like this one. Easy to use. Only onmouseover eventhandlers are required that specify the tooltip text.
 
 
 
Features
The width of the tooltips is adapted automatically. The tooltips may contain plain text as well as HTML, such as images, line breaks, tables, lists etc.
 
If you like to, you can customize these crossbrowser JavaScript Tooltips and their behavior in multiple ways. You can change the default configuration values inside the library itself (section GLOBAL TOOLTIP CONFIGURATION), or configure each tooltip individually by passing commands to the onmouseover eventhandlers.
 
Moreover, there are Extensions (plugins) available (or write your own!) that provide even more options to customize tooltips.
 
This Tooltip DHTML Library is even capable of dynamically converting arbitrary HTML elements to tooltips, which means you can put really important stuff into tooltips since HTML content is relevant to web search engines. Documentation.
 
 
 
Cross Browser
This Tooltip JavaScript works in allmost all browsers, except of ancient browsers which nobody is using anymore (Netscape 4, Opera 5/6).
 
Supported browsers: Gecko Browsers (Firefox, Mozilla, Netscape 6+, Galeon and others), IE 5+, Opera 7+, Konqueror, Safari.
 
 
 
 
How To Use the Script
DHTML: Tooltips via JavaScript  
Top of page
 
Features
 
Cross Browser
 
Documentation
 
Extensions
 
Download
 
1. Download the library
Download wz_tooltip.js and unzipp it.
 
 
2. Link wz_tooltip.js into the html file
Copy the following line into the BODY section, preferably immediately after the opening <body> tag:
<script type="text/javascript" src="wz_tooltip.js"></script>

If necessary, adapt the path 'src="wz_tooltip.js"' to the JavaScript file.  
 
3. Specify tooltip text inside onmouseover eventhandlers
Each of the html tags to display a tooltip requires an onmouseover attribute only:
<a href="index.htm" onmouseover="Tip('Some text')">Homepage </a>

That's all. No onmouseout eventhandlers, no title attributes, no container DIV.
 
As you can see, the text to be displayed must be enclosed with single quotes and passed to a function Tip(). Attention: Single quotes (apostrophes) inside the tooltip text each must be masked with a backslash. Example:
Tip('This text won\'t trigger a JavaScript error.');
DHTML: Tooltips per JavaScript  
Top of page
 
Features
 
Cross Browser
 
Documentation
 
Extensions
 
Download
 
 
 
 
 
Extended Configuration
4. Alternative: Convert HTML element to tooltip
Instead of defining the tooltip text directly, you can specify an arbitrary HTML element to convert to a tooltip. This is advantageous in some aspects:
  • You can have really important stuff in tooltips, since HTML content (unlike JavaScript content) of a page is relevant to web search engines.
  • If placed conveniently in the page, the content is also available for users who have disabled JavaScript.
  • It may be easier to define complex inner tooltip HTML directly in the HTML element to be converted, rather than in a JavaScript string.
While the page is loading, the Tooltips Library hides automatically HTML elements to be converted to tooltips.
 
To define a tooltip to be created from an HTML element, just pass the ID of the desired HTML tag to the function TagToTip(). Example:
<a href="index.htm" onmouseover="TagToTip('Span2')">Start page </a>
...
<span id="Span2">This is some comment<br>about my start page</span>
...

In this example, the tooltip over the link will display the content grabbed from the <span> element. Note that only the inner content including the linebreak tag will be copied, whilst the SPAN tag itself and any formatting applied to it will not be inherited. The <span> element will be automatically hidden while the page is still loading.
 
 
5. HTML inside tooltips
This is only relevant if you specify the tooltip text directly, by calling Tip('...') instead of TagToTip('...').
 
Regard the following irregularities:
Any doublequote inside the tooltip text must inevitably be written as HTML character entity (&quot;). The reason is that the doublequote serves already as delimiter for the onmouseover eventhandler. Apostrophes (singlequotes) must be masked with a preceding backslash. As delimiters for HTML tag attributes inside the tooltip text, you can use either &quot; or \' . Example:
Correct:
<a href="index.htm" onmouseover="Tip('Text with <img src=\'pics/image.jpg\' width=\'60\'>image.')"> Homepage</a>
 
Wrong:
<a href="index.htm" onmouseover="Tip('Text with <img src="pics/image.jpg" width="60">image.')"> Homepage</a>

 
 
6. Tooltip content via variable or function call
Instead of a string enclosed with single quotes, Tip() accepts as well a variable or a call to a function defined elsewhere, for instance in a <script> block or in a separate JS file. The same is true for commands passed to Tip() or TagToTip() (listing and description of commands see below). Thus, each time a tooltip is about to be displayed, its content and formatting could be established dynamically.
Example:
<html>
<head>
...
<script type="text/javascript">
var txt1 = "This is the text of the first tooltip";

function TooltipTxt(n)
{
    return "This is the text of the " + n + " tooltip";
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('second'))">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('third'))">Link 3</a>
...
</body>
</html>
DHTML: Tooltips per JavaScript  
Top of page
 
Features
 
Cross Browser
 
Documentation
 
Extensions
 
Download
 
 
 
7. Commands to customize tooltips individually
The global default configuration, taking effect on all tooltips, can be changed in the JavaScript file itself, in the section "GLOBAL TOOLTIP CONFIGURATION".
 
The commands in the list below are to configure tooltips individually, they override the global configuration in wz_tooltip.js. These commands can be passed to the Tip() or TagToTip() function calls in the onmouseover eventhandlers. Each command must be accompanied by the desired value, separated by a comma:
onmouseover="Tip('Some text', ABOVE, true)"
or
onmouseover="TagToTip('SomeID', TITLECOLOR, '#CCFFCC')"
Multiple commands form a comma-separated list of command-value pairs. Order of commands is arbitrary. Example:
onmouseover="Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)"


Command Description
ABOVE Positions the tooltip above the mousepointer. Value: true or false.
 
Combine with OFFSETY to adjust the vertical distance from the mousepointer, or with CENTERMOUSE to center the tooltip horizontally above the mousepointer.
BGCOLOR Background color of the tooltip. Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan', or empty string '' for no background.
Example:
onmouseover="Tip('Some text', BGCOLOR, '#D3E3F6')"
or
onmouseover="Tip('Some text', BGCOLOR, '')"
BGIMG Background image. Value: Path to image, in single quotes.
Example:
onmouseover="Tip('Some text', BGIMG, '../images/tipbackground.gif')"
BORDERCOLOR Border color. Value: HTML color, in single quotes, e.g. '#dd00aa'.
BORDERSTYLE Border style. Value: CSS border style, in single quotes. Recommend are 'solid' (default), 'dashed' or 'dotted', others may not work in all browsers.
BORDERWIDTH Width of tooltip border. Value: Integer ≥ 0. Default is 1. Use 0 for no border.
Example:
onmouseover="Tip('Some text', BORDERWIDTH, 2)"
CENTERMOUSE Centers the tooltip horizontally beneath (or above) the mousepointer. Value: true or false. Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (config. OffsetX), or as specified by the OFFSETX command.
Example:
onmouseover="Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)"
CLICKCLOSE Closes the tooltip once the user clicks somewhere inside the tooltip or into the document. Value: true, false.
CLOSEBTN Displays a closebutton in the titlebar. Value: true, false.
CLOSEBTNCOLORS Colors used for the closebutton.
 
Value must be a comma-separated array of 4 color values. Each color in single quotes. The entire array must be enclosed with a pair of square brackets, see example below, since it's actually a single parameter. The 4 colors have the following meanings:
1. Background color
2. Text color
3. Highlighted background, while the button is being hovered
4. Hilighted text color, while the button is being hovered
For each of these colors, you can also specify an empty string '', in which case the title background, or title text color, respectively, is used for that button state.
 
Example:
Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)
In this example, the first color value (background color) is an empty string. Therefore the closebutton inherits the titlebar background.
CLOSEBTNTEXT Text in the closebutton. Value must be enclosed with single quotes. Example:
Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)
Globally preset in wz_tooltip.js is '&nbsp;X&nbsp;' - the whitespace entities '&nbsp;' add some horizontal padding to the button.
COPYCONTENT COPYCONTENT has only effect on tooltips created with TagToTip(), that is, if an HTML element is to be converted to a tooltip.
Value: true, false.
If true (this is the default behaviour preset in wz_tooltip.js), just a copy of the text (or inner HTML) of the HTML element is inserted into the tooltip. If false, the entire HTML element (its DOM node) by itself is temporarily converted to a tooltip, which may be useful in the following aspects:
1.) If the HTML element converted to a tooltip contains a form with inputs, their current user input will be maintained even while the tooltip is not displayed.
2.) The tooltip inherits the style properties of the HTML element.
Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value false:
TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)
Moreover, this example turns off the native tooltip border (BORDERWIDTH, 0), and sets the native tooltip padding to zero, so only the padding and border defined for the HTML element itself are displayed.
DELAY Tooltip shows up after the specified timeout, in milliseconds. A behavior similar to OS based tooltips.
Value: Integer ≥ 0. Use 0 for no delay. In wz_tooltip.js preset and recommended is 400.
Example:
onmouseover="Tip('Some text', DELAY, 1000)"
DURATION Time span, in milliseconds, until the tooltip will be hidden, even if the STICKY command has been applied, or even if the mouse is still on the HTML element that has triggered the tooltip.
Value: Integer ≥ 0. Use 0 for no limitation (this is the default)
FADEIN Fade-in animation. The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. 0 for no animation.
 
Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror. These fall back to normal, non-animated behaviour.
FADEOUT Fade-out animation. The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. 0 for no animation.
 
Recommended: combine with FADEIN.
 
Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror. These fall back to normal, non-animated behaviour.
FIX Shows the tooltip at the fixed coordinates [x, y]. Value: Square-bracketed array of two integers. Example:
onmouseover="Tip('Some text', FIX, [230, 874])"
You can also call function(s) defined elsewhere that calculate the coordinates dynamically:
onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"
or
onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"
In the latter example, the function CalcFixXY() must return an array containing the two numbers.
FOLLOWMOUSE The tooltip follows the movements of the mouse. Value: true, false. Default: true.
 
When turning this off by applying the value false, the tooltip behaves like OS-based tooltips which don't follow the mouse.
FONTCOLOR Font color. Value: HTML color, in single quotes, e.g. '#990099'
FONTFACE Font face (font family).
Value: As you'd specify it in HTML or CSS, enclosed with single quotes, e.g. Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')
FONTSIZE Font size. Value: Size with unit, in single quotes. Unit ('px', 'pt', 'em' etc.) is mandatory.
FONTWEIGHT Font weight. Value: 'normal' or 'bold', in single quotes.
LEFT Tooltip positioned on the left side of the mousepointer. Value: true, false.
LEFT and ABOVE commands combined.
Example:
onmouseover="Tip('Some text', LEFT, true, ABOVE, true)"
OFFSETX Horizontal offset from mouse-pointer. Value: Any integer. May also be negative.
OFFSETY Vertical offset from the mouse-pointer. Value: Any integer. May also be negative.
OPACITY Transparency of tooltip. Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency).
 
Opacity is the opposite of transparency, i.e.
opacity = 100 - transparency (in percent).
Another example with image (taken on my 9000-km / 5500-miles recumbent bicycle trip Hamburg-Northcape-Munich), shadow via SHADOW command, content centered using TEXTALIGN, background image via BGIMG and animation via FADEIN and FADEOUT commands.
 
Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror.
PADDING Inner spacing of tooltip, between border and content. Value: Integer ≥ 0.
SHADOW Tooltip drops a shadow. Value: true, false
SHADOWCOLOR Shadow color. Value: HTML color, in single quotes.
Example:
onmouseover="Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"
SHADOWWIDTH Shadow width (offset). Value: Integer ≥ 0.
Example:
onmouseover="Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)"
STICKY The tooltip stays fixed at its initial position until another tooltip pops up. Value: true, false.
 
With DURATION you can enforce the tooltip to disappear after a certain time span.
TEXTALIGN Aligns the text in the body of the tooltip. Value: 'right', 'center', 'justify' or 'left'.
Example:
onmouseover="Tip('Some text', TEXTALIGN, 'right')"
TITLE Display a titlebar. Value: Text to display, in single quotes. May even contain HTML, which gives you additional freedom in fashioning the titlebar.
TITLEALIGN Aligns the text in the titlebar. Value: 'right', 'center', 'justify' or 'left'
TITLEBGCOLOR Backgroundcolor of the titlebar. Value: HTML color, in single quotes. If it's an empty string '', the border color (see also BORDERCOLOR command) is used (this is the default).
TITLEFONTCOLOR Color of title text. Value: HTML color, in single quotes. If it's an empty string '', the backgroundcolor of the tooltip body (see also BGCOLOR command) is used (this is the default).
TITLEFONTFACE Font face for title text. Value: Like in HTML or CSS. Enclosed with single quotes. If the value is an empty string '', the tooltip body font, in boldified form, is used (this is the default).
Example:
onmouseover="Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"
TITLEFONTSIZE Font size of title text. Value: Size with unit, in single quotes. Unit ('px', 'pt', 'em' etc.) is mandatory. If the value is an empty string '', the fontsize of the tooltip body is applied.
WIDTH Width of tooltip. Value: Integer ≥ 0. If 0 (the default), the width is automatically adapted to the content of the tooltip.
 
Note that the tooltips follow the W3C box model, which means that the specified width applies to the actual content of the tooltip, excluding padding (see PADDING command), border and shadow.


 

 
DHTML: Tooltip with JavaScript
 
 
Extensions
Visit the Extensions page for additional configuration options.
 
 
 
 
Download wz_tooltip.js   4.12     zipped 15 KB
wz_tooltip.zip
License: LGPL
 
history.htm (Changelog of wz_tooltip.js)
 
 
 
Old Version For those who are still using a version prior to v.4.0 and want to stay with the old rules of defining tooltips and including the script:
Documentation and download of wz_tooltip.js v.3.45
 
 
 
Donation
Financial support for the very numerous hours of development and for the costs of this website is welcome.
(Donation - €)
(Donation - US-Dollar)
(Donation - Australian Dollar)

 
 
 
DHTML: Tooltips per JavaScript  
Top of page
 
Features
 
Cross Browser
 
Documentation
 
Extensions
 
Download
 
 
 
 
 
 
 
 
Walter Zorn, Munich, 2007
 
 
 
 
visitors on www.walterzorn.com since 27. 12. 2002